$(document).ready(function(){

	$('#toggle-switcher').click(function(){
		if($(this).hasClass('opened')){
			$(this).removeClass('opened');
			$('#style-switcher').animate({'right':'-222px'});
		}else{
			$(this).addClass('opened');
			$('#style-switcher').animate({'right':'-10px'});
		}
	});
	
	$('#style-switcher li').click(function(e){
		e.preventDefault();
		
		$elem = $(this);
		
		$('link#theme').attr('href', '/Content/css/designr-theme-'+$elem.attr('id')+'.css');
		
		var skillsColor = $(this).css('backgroundColor');
		
		$('.row.skills').empty().html('\
		 <div class="col-sm-6 col-md-3 text-center">\
                    <span class="chart" data-percent="100"><span class="percent">100</span></span>\
                    <h2 class="text-center">C#/ VB.Net</h2>\
                </div>\
                <div class="col-sm-6 col-md-3 text-center">\
                    <span class="chart" data-percent="100"><span class="percent">100</span></span>\
                    <h2 class="text-center">ASP.Net/ MVC 3/4</h2>\
                </div>\
                <div class="col-sm-6 col-md-3 text-center">\
                    <span class="chart" data-percent="100"><span class="percent">100</span></span>\
                    <h2 class="text-center">Desktop/ Web Development</h2>\
                </div>\
                <div class="col-sm-6 col-md-3 text-center">\
                    <span class="chart" data-percent="100"><span class="percent">100</span></span>\
                    <h2 class="text-center">Social Media Integration</h2>\
                </div>\
                <div class="col-sm-6 col-md-3 text-center">\
                    <span class="chart" data-percent="90"><span class="percent">90</span></span>\
                    <h2 class="text-center">SQL Server</h2>\
                </div>\
                <div class="col-sm-6 col-md-3 text-center">\
                    <span class="chart" data-percent="90"><span class="percent">90</span></span>\
                    <h2 class="text-center">Architecture Designing/ Planning</h2>\
                </div>\
                <div class="col-sm-6 col-md-3 text-center">\
                    <span class="chart" data-percent="90"><span class="percent">90</span></span>\
                    <h2 class="text-center">UI / UX</h2>\
                </div>\
                <div class="col-sm-6 col-md-2 text-center">\
                    <span class="chart" data-percent="90"><span class="percent">90</span></span>\
                    <h2 class="text-center">Bootstrap/ HTML/ CSS/ jQuery</h2>\
                </div>');

		$('.chart').each(function(){
		$(this).easyPieChart({
				size:170,
				animate: 2000,
				lineCap:'butt',
				scaleColor: false,
				barColor: skillsColor,
				lineWidth: 10
			});
		});
		
		$('link#theme').load(function(){
			$('link#main').attr('href', '/Content/css/designr-theme-'+$elem.attr('id')+'.css');
		});
	});
});